import React, { FunctionComponent, useState } from 'react';
import { graphql, PreloadedQuery, usePreloadedQuery } from 'react-relay';
import Box from '@mui/material/Box';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Drawer, { DrawerControlledDialType, DrawerVariant } from '@components/common/drawer/Drawer';
import {
  MalwareAnalysisEditionOverview_malwareAnalysis$key as malwareAnalysis$key,
} from '@components/analyses/malware_analyses/__generated__/MalwareAnalysisEditionOverview_malwareAnalysis.graphql';
import { MalwareAnalysisEditionDetails_malwareAnalysis$key } from '@components/analyses/malware_analyses/__generated__/MalwareAnalysisEditionDetails_malwareAnalysis.graphql';
import useHelper from 'src/utils/hooks/useHelper';
import { useFormatter } from '../../../../components/i18n';
import ErrorNotFound from '../../../../components/ErrorNotFound';
import MalwareAnalysisEditionOverview from './MalwareAnalysisEditionOverview';
import { MalwareAnalysisEditionContainerQuery } from './__generated__/MalwareAnalysisEditionContainerQuery.graphql';
import MalwareAnalysisEditionDetails from './MalwareAnalysisEditionDetails';
import { useIsEnforceReference } from '../../../../utils/hooks/useEntitySettings';

interface MalwareAnalysisEditionContainerProps {
  queryRef: PreloadedQuery<MalwareAnalysisEditionContainerQuery>
  handleClose: () => void
  open?: boolean
  controlledDial?: DrawerControlledDialType;
}

export const malwareAnalysisEditionQuery = graphql`
  query MalwareAnalysisEditionContainerQuery($id: String!) {
    malwareAnalysis(id: $id) {
      ...MalwareAnalysisEditionOverview_malwareAnalysis
      ...MalwareAnalysisEditionDetails_malwareAnalysis
      editContext {
        name
        focusOn
      }
    }
  }
`;
const MalwareAnalysisEditionContainer: FunctionComponent<MalwareAnalysisEditionContainerProps> = ({
  queryRef,
  handleClose,
  open,
  controlledDial,
}) => {
  const { t_i18n } = useFormatter();
  const { isFeatureEnable } = useHelper();
  const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');

  const { malwareAnalysis } = usePreloadedQuery(malwareAnalysisEditionQuery, queryRef);

  const [currentTab, setCurrentTab] = useState(0);
  const handleChangeTab = (event: React.SyntheticEvent, value: number) => setCurrentTab(value);

  if (malwareAnalysis === null) {
    return (<ErrorNotFound />);
  }
  return (
    <Drawer
      title={t_i18n('Update a malware analysis')}
      variant={!isFABReplaced && open == null ? DrawerVariant.update : undefined}
      context={malwareAnalysis?.editContext}
      onClose={handleClose}
      open={open}
      controlledDial={isFABReplaced ? controlledDial : undefined}
    >
      {({ onClose }) => (
        <>
          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
            <Tabs
              value={currentTab}
              onChange={handleChangeTab}
            >
              <Tab label={t_i18n('Overview')} />
              <Tab label={t_i18n('Details')} />
            </Tabs>
          </Box>
          {currentTab === 0 && (
            <MalwareAnalysisEditionOverview
              malwareAnalysisRef={malwareAnalysis as malwareAnalysis$key}
              context={malwareAnalysis?.editContext}
              enableReferences={useIsEnforceReference('Malware-Analysis')}
              handleClose={onClose}
            />
          )}
          {currentTab === 1 && (
            <MalwareAnalysisEditionDetails
              malwareAnalysisRef={malwareAnalysis as MalwareAnalysisEditionDetails_malwareAnalysis$key}
              context={malwareAnalysis?.editContext}
              enableReferences={useIsEnforceReference('Malware-Analysis')}
              handleClose={onClose}
            />
          )}
        </>
      )}
    </Drawer>
  );
};

export default MalwareAnalysisEditionContainer;
